
<template>
    <rx-dialog @handOk="handleSubmit" @cancel="cancel">
        <rx-layout>
            <div slot="center">
              <a-form-model ref="form"  :model="mdl" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-form-model-item  label="名称" prop = "name">
                  <a-input-group compact>
                    <a-select style="width:30%;" @change="insertScript">
                      <a-select-opt-group>
                        <span slot="label"><a-icon type="user" />项目变量</span>
                        <a-select-option :value="item.value" v-for="(item,index) in variableProjectAry">{{item.label}}</a-select-option>
                      </a-select-opt-group>
                      <a-select-opt-group>
                        <span slot="label"><a-icon type="user" />全局变量</span>
                        <a-select-option :value="item.value" v-for="(item,index) in variableGlobalAry">{{item.label}}</a-select-option>
                      </a-select-opt-group>
                    </a-select>
                    <a-input ref="name" style="width:65%;" placeholder="请输入名称" v-model="mdl.name" />
                  </a-input-group>
                </a-form-model-item>
              </a-form-model>
            </div>
        </rx-layout>
    </rx-dialog>
</template>
<script>
    import FormCodegenFilePathApi from '@/api/form/codegen/formCodegenFilePath';
    import {RxDialog,BaseFormModel} from "@lowcode/jpaas-common-lib";


    export default {
      name: 'FormCodegenFilePathEdit',
      mixins: [BaseFormModel],
      props: {
        data: Object,
        globalAry:Array
      },
      components: {
        RxDialog,
      },
      data() {
        return {
          variableProjectAry:[
            {label:"项目变量名",value:"projectVar"},
            {label:"项目别名",value:"projectKey"}
          ],
          variableGlobalAry:[],
          rules: {
            name: [{required: true, message: "请输入名称", trigger: 'change'}]
          }
        }
      },
      methods: {
        i18n(name,text,key){
          return this.$ti18(name,text,"formCodegenFilePath",key);
        },
        insertScript(value){
          var script="{" + value + "}";
          this.$set(this.mdl,"name",(this.mdl.name || "")+script);
          this.$refs.name.focus();
        },
        onload_(){
          this.initGlobalAry();
          if(!this.pkId){
            if(!this.data.path && this.data.parentPath){
              this.mdl.path=this.data.parentPath+"/";
            }
            Object.assign(this.mdl,this.data);
          }
        },
        initGlobalAry(){
          if(this.globalAry) {
            this.variableGlobalAry = this.globalAry.map(item => {
              return {value: item.value, label: item.label};
            });
          }
        },
        get(id) {
          return FormCodegenFilePathApi.get(id);
        },
        save() {
          return FormCodegenFilePathApi.save(this.mdl);
        }
      },
      watch:{
        "mdl.name":function(value){
          let path=this.mdl.path;
          let idx=-1;
          if(path) {
            idx=path.lastIndexOf("/");
          }
          if(idx!=-1){
            path=path.substring(0,idx)+"/"+value;
          }else{
            path=value;
          }
          this.mdl.path=path;
        }
      }
    }
</script>
<style>
    .relick a{
        margin-right: 10px;
    }

</style>
